<template>
  <div>
    <div class="m-l-100 m-t-90 w-600">
      <el-form ref="form" :model="form" :rules="rules" label-width="260px">
        <el-form-item label="提现手续费(%)" prop="CASH_CHARGE">
          <el-input v-model.trim="form.CASH_CHARGE" class="h-40 w-200"></el-input>
        </el-form-item>

        <el-form-item label="市代返利的百分比(%)" prop="RESERVE_CITY">
          <el-input v-model.trim="form.RESERVE_CITY" class="h-40 w-200"></el-input>
        </el-form-item>

        <el-form-item label="区县返利的百分比(%)" prop="RESERVE_REGION">
          <el-input v-model.trim="form.RESERVE_REGION" class="h-40 w-200"></el-input>
        </el-form-item>

        <el-form-item label="推荐人返利白分比(%)" prop="RESERVE_REFER">
          <el-input v-model.trim="form.RESERVE_REFER" class="h-40 w-200"></el-input>
        </el-form-item>

        <el-form-item label="推荐人所属店铺返利白分比(%)" prop="RESERVE_REFER_SHOP">
          <el-input v-model.trim="form.RESERVE_REFER_SHOP" class="h-40 w-200"></el-input>
        </el-form-item>

        <el-form-item label="一星董事分红比率(%)" prop="RESERVE_LEVEL_1">
          <el-input v-model.trim="form.RESERVE_LEVEL_1" class="h-40 w-200"></el-input>
        </el-form-item>

        <el-form-item label="二星董事分红比率(%)" prop="RESERVE_LEVEL_2">
          <el-input v-model.trim="form.RESERVE_LEVEL_2" class="h-40 w-200"></el-input>
        </el-form-item>

        <el-form-item label="三星董事分红比率(%)" prop="RESERVE_LEVEL_3">
          <el-input v-model.trim="form.RESERVE_LEVEL_3" class="h-40 w-200"></el-input>
        </el-form-item>

        <el-form-item label="四星董事分红比率(%)" prop="RESERVE_LEVEL_4">
          <el-input v-model.trim="form.RESERVE_LEVEL_4" class="h-40 w-200"></el-input>
        </el-form-item>

        <el-form-item label="五星董事分红比率(%)" prop="RESERVE_LEVEL_5">
          <el-input v-model.trim="form.RESERVE_LEVEL_5" class="h-40 w-200"></el-input>
        </el-form-item>

        <el-form-item label="六星董事分红比率(%)" prop="RESERVE_LEVEL_6">
          <el-input v-model.trim="form.RESERVE_LEVEL_6" class="h-40 w-200"></el-input>
        </el-form-item>

        <el-form-item label="七星董事分红比率(%)" prop="RESERVE_LEVEL_7">
          <el-input v-model.trim="form.RESERVE_LEVEL_7" class="h-40 w-200"></el-input>
        </el-form-item>

        <!--  -->
        <el-form-item label="一星董事推荐数量" prop="LEVEL_NUM_1">
          <el-input v-model.trim="form.LEVEL_NUM_1" class="h-40 w-200"></el-input>
        </el-form-item>

        <el-form-item label="二星董事推荐数量" prop="LEVEL_NUM_2">
          <el-input v-model.trim="form.LEVEL_NUM_2" class="h-40 w-200"></el-input>
        </el-form-item>

        <el-form-item label="三星董事推荐数量" prop="LEVEL_NUM_3">
          <el-input v-model.trim="form.LEVEL_NUM_3" class="h-40 w-200"></el-input>
        </el-form-item>

        <el-form-item label="四星董事推荐数量" prop="LEVEL_NUM_4">
          <el-input v-model.trim="form.LEVEL_NUM_4" class="h-40 w-200"></el-input>
        </el-form-item>

        <el-form-item label="五星董事推荐数量" prop="LEVEL_NUM_5">
          <el-input v-model.trim="form.LEVEL_NUM_5" class="h-40 w-200"></el-input>
        </el-form-item>

        <el-form-item label="六星董事推荐数量" prop="LEVEL_NUM_6">
          <el-input v-model.trim="form.LEVEL_NUM_6" class="h-40 w-200"></el-input>
        </el-form-item>

        <el-form-item label="七星董事推荐数量" prop="LEVEL_NUM_7">
          <el-input v-model.trim="form.LEVEL_NUM_7" class="h-40 w-200"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="add()" :loading="isLoading">提交</el-button>
        </el-form-item>
      </el-form>
      <preview ref="preview" :url="propsImg"></preview>
    </div>
  </div>
</template>
<script>
import http from "assets/js/http";
import preview from "./preview.vue";
export default {
  data() {
    let check_LOGIN_SESSION_VALID = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("登录会话有效期不能为空"));
      }
      if (!Number.isInteger(value)) {
        callback(new Error("请输入数字值"));
      } else {
        if (value < 300) {
          callback(new Error("必须大于300(5分钟)"));
        } else {
          callback();
        }
      }
    };
    return {
      isLoading: false,
      fileList: [],
      propsImg: "",
      form: {
        CHANGE_FOR_REMONEY: "",
        CASH_CHARGE: "",
        IDENTIFYING_CODE: "0",
        LOGO_TYPE: 1,
        LOGIN_SESSION_VALID: 300,
        CASH_CHARGE: "",
        RESERVE_LEVEL_1: "",
        RESERVE_LEVEL_2: "",
        RESERVE_LEVEL_3: "",
        RESERVE_LEVEL_4: "",
        RESERVE_LEVEL_5: "",
        RESERVE_LEVEL_6: "",
        RESERVE_LEVEL_7: "",
        LEVEL_NUM_1: "",
        LEVEL_NUM_2: "",
        LEVEL_NUM_3: "",
        LEVEL_NUM_4: "",
        LEVEL_NUM_5: "",
        LEVEL_NUM_6: "",
        LEVEL_NUM_7: ""
      },
      uploadUrl: "",
      imageUrl: "",
      rules: {
        CHANGE_FOR_REMONEY: [
          { required: true, message: "请输入转账手续费 ", trigger: "blur" }
        ],
        CASH_CHARGE: [
          { required: true, message: "请输入提现手续费 ", trigger: "blur" }
        ],
        LOGIN_SESSION_VALID: [
          { validator: check_LOGIN_SESSION_VALID, trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    add() {
      this.$refs.form.validate(pass => {
        if (pass) {
          this.isLoading = !this.isLoading;
          let temp = {};
          // 系列化对象
          let str = JSON.stringify(this.form);
          temp = JSON.parse(str); // 还原
          if (temp.IDENTIFYING_CODE) {
            temp.IDENTIFYING_CODE = 1;
          } else {
            temp.IDENTIFYING_CODE = 0;
          }
          this.apiPost("pudu/configs", temp).then(res => {
            this.handelResponse(
              res,
              data => {
                _g.toastMsg("success", "提交成功");
                this.isLoading = !this.isLoading;
              },
              () => {
                this.isLoading = !this.isLoading;
              }
            );
          });
        }
      });
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = ResourceBaseUrl + res.data;
      this.form.CASH_CHARGE = res.data;
      _g.closeGlobalLoading();
    },
    beforeAvatarUpload(file) {
      _g.openGlobalLoading();
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
        _g.closeGlobalLoading();
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        _g.closeGlobalLoading();
      }
      return isJPG && isLt2M;
    }
  },
  created() {
    this.uploadUrl = window.ResourceBaseUrl + "/admin/upload";
    this.apiGet("pudu/configs").then(res => {
      this.handelResponse(res, data => {
        this.form.CHANGE_FOR_REMONEY = data.CHANGE_FOR_REMONEY;
        this.form.IDENTIFYING_CODE = Boolean(parseInt(data.IDENTIFYING_CODE));
        this.form.LOGIN_SESSION_VALID = parseInt(data.LOGIN_SESSION_VALID);
        this.imageUrl = ResourceBaseUrl + data.CASH_CHARGE;
        if (data.CASH_CHARGE) {
          let img = window.HOST + data.CASH_CHARGE;
          this.fileList.push({ name: "图片", url: img });
          this.form.CASH_CHARGE = data.CASH_CHARGE;
        }

        // 佣金返现配置参数
        this.form.RESERVE_CITY = data.RESERVE_CITY;
        this.form.RESERVE_REGION = data.RESERVE_REGION;
        this.form.RESERVE_REFER = data.RESERVE_REFER;
        this.form.RESERVE_REFER_SHOP = data.RESERVE_REFER_SHOP;

        //
        this.form.RESERVE_LEVEL_1 = data.RESERVE_LEVEL_1;
        this.form.RESERVE_LEVEL_2 = data.RESERVE_LEVEL_2;
        this.form.RESERVE_LEVEL_3 = data.RESERVE_LEVEL_3;
        this.form.RESERVE_LEVEL_4 = data.RESERVE_LEVEL_4;
        this.form.RESERVE_LEVEL_5 = data.RESERVE_LEVEL_5;
        this.form.RESERVE_LEVEL_6 = data.RESERVE_LEVEL_6;
        this.form.RESERVE_LEVEL_7 = data.RESERVE_LEVEL_7;

        //
        this.form.LEVEL_NUM_1 = data.LEVEL_NUM_1;
        this.form.LEVEL_NUM_2 = data.LEVEL_NUM_2;
        this.form.LEVEL_NUM_3 = data.LEVEL_NUM_3;
        this.form.LEVEL_NUM_4 = data.LEVEL_NUM_4;
        this.form.LEVEL_NUM_5 = data.LEVEL_NUM_5;
        this.form.LEVEL_NUM_6 = data.LEVEL_NUM_6;
        this.form.LEVEL_NUM_7 = data.LEVEL_NUM_7;
      });
    });
  },
  components: {
    preview
  },
  mixins: [http]
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>